<template>
	<NavBarVue title='店铺活动详情' />
	<view class="active_detail">
		<view class="top_box">
			<view class="h1">{{shopStore.shopInfoData.shopInfos.storeIntroduction}}</view>
			<view class="rate_star">
				<u-rate :value="'5'" readonly></u-rate>
				<text class="spa">￥50/人</text>
			</view>
			<view class="x_scroll">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
					<img class="demo"
						src="https://img2.baidu.com/it/u=1544100220,3453911849&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375" alt="" />
					<img class="demo"
						src="https://img1.baidu.com/it/u=525880268,1874683061&fm=253&fmt=auto&app=138&f=JPEG?w=769&h=500" alt="" />
					<img class="demo"
						src="https://img1.baidu.com/it/u=1780128475,2196746060&fm=253&fmt=auto&app=138&f=JPEG?w=725&h=500" alt="" />
					<img class="demo"
						src="https://img1.baidu.com/it/u=3875847714,1536778447&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=428" alt="" />
					<img class="demo"
						src="https://img2.baidu.com/it/u=958588398,2041682710&fm=253&fmt=auto&app=138&f=JPEG?w=748&h=500" alt="" />
				</scroll-view>
			</view>
			<view class="operating">
				<text>营业中</text>
				<text class="date">12:00-24:00</text>
			</view>
			<view class="pos">
				<view class='pos_left'>
					<text class="iconfont icon-dingwei" style="padding-top: 5rpx;padding-right: 10rpx;"></text>
					<view class="left_top">
						<view class="">
							{{shopStore.shopInfoData.shopInfos.storeLocation}}
						</view>
						<view class="left_bom">距您3.1km，需要6分钟</view>
					</view>
				</view>
				<view class='pos_right'>
					<view class="icn" v-for="(item,idx) in addressCarList" :key="idx">
						<text :class="'iconfont icon-' + item.icon"></text>
						<view class="picon">{{item.iconName}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box">
			<view class="shadow"></view>
			<view class="shop_image">
				<img class="imgs" src="/static/imgAll/矩形(4).png" alt="" />
			</view>
			<view class="coupon_list" v-for="item in activity" :key="item.id">
				<view class="li_top">
					<view class="li_h2">
						{{item.title}}
					</view>
					<view class="li_p">
						<text>活动时间：</text>
						<text>{{item.times}}</text>
					</view>
				</view>
				<view class="li_con">
					<img class="li_imgs" :src="item.img" alt="" />
					<view class="con_right">
						<view class="con_p">{{item.range}}</view>
						<view class="con_p">
							<text>数量：</text>
							<text>{{item.num}}</text>
						</view>
						<view class="con_p">{{item.slogan}}</view>
					</view>
				</view>
				<view class="li_bom">
					<button class="li_btn">领取优惠券</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import NavBarVue from '../../../../components/NavBar.vue';
	import {
		useShopStore
	} from '../../../../store'

	// 获取门店信息
	const shopStore = useShopStore()
	onMounted(() => {
		getShopStoreById(4)
	})
	const getShopStoreById = (id) => {
		shopStore.shopInfo(id)
	}

	// 收藏列表
	const addressCarList = reactive([{
			icon: 'shoucang',
			iconName: '收藏'
		},
		{
			icon: 'daohang',
			iconName: '导航'
		},
		{
			icon: 'xiaoqiche',
			iconName: '打车'
		}
	])

	const scrollTop = ref(0)
	const old = ref({
		scrollTop: 0
	})
	const scroll = function(e) {
		old.value.scrollTop = e.detail.scrollTop
	}
	const amap = require("../../../../static/amap-wx.130.js")
	const amapPlugin = ref(null)
	const address = ref(null)
	const getAddress = () => {
		amapPlugin.value = new amap.AMapWX({
			key: "0c25a82d19ebe2c3e94e1d1b190709d3"
		});
		uni.showLoading({
			title: '获取信息中'
		});
		// 成功获取位置
		amapPlugin.value.getRegeo({
			success: (data) => {
				console.log(data, '当前定位')
				address.vlaue =
					`${data[0].regeocodeData.addressComponent.province}${data[0].regeocodeData.addressComponent.district}${data[0].regeocodeData.addressComponent.township}`;
				uni.hideLoading();
			},
			// 获取位置失败
			fail: (err) => {
				console.log(err);
				uni.showToast({
					title: "获取位置失败，请重启小程序",
					icon: "error"
				})
			}
		});
	}

	// 活动列表
	const activity = [{
			img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
			title: "彻夜畅玩场",
			times: "21:00-02:00",
			range: "21:00至次日06:00内",
			num: 20,
			slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
		},
		{
			img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
			title: "彻夜畅玩场",
			times: "21:00-02:00",
			range: "21:00至次日06:00内",
			num: 20,
			slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
		},
		{
			img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
			title: "彻夜畅玩场",
			times: "21:00-02:00",
			range: "21:00至次日06:00内",
			num: 20,
			slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
		},
		{
			img: "https://img2.baidu.com/it/u=256864552,3951581787&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
			title: "彻夜畅玩场",
			times: "21:00-02:00",
			range: "21:00至次日06:00内",
			num: 20,
			slogan: "康师傅系列6瓶+抽纸(可换百岁山，果粒橙)"
		},

	]
</script>

<style lang="scss">
	.active_detail {
		width: 100%;
		height: 100%;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		font-family: PingFangSC, PingFang SC;
	}

	.top_box {
		height: 750rpx;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.h1 {
			font-weight: 600;
			font-size: 50rpx;
			color: #222222;
			line-height: 55rpx;
			text-align: justify;
			font-style: normal;
		}
		.rate_star {
			display: flex;
			align-items: center;
			.spa {
				margin-left: 10px;
			}
		}

		.x_scroll {
			margin-top: 20rpx;

			.scroll-Y {
				height: 300rpx;
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				margin: 10rpx 0rpx;
			}

			.scroll-view-item {
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
			}

			.scroll-view-item_H {
				display: inline-block;
				width: 100%;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
			}

			.demo {
				width: 320rpx;
				height: 240rpx;
				margin-right: 8rpx;
				border-radius: 20rpx;
			}
		}

		.operating {
			font-size: 24rpx;
			position: relative;
			.iconfont {
				font-size: 38rpx;
			}

			.date {
				padding-left: 8rpx;
			}
		}
		.operating::after {
			content: "";
			display: block;
			width: 93%;
			height: 1px;
			background-color: #b2b2b2;
			position: absolute;
			bottom: -30rpx;
			transform: translateY(-50%);
		}
		.pos {
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			.pos_left {
				display: flex;
				.left_top {
					font-weight: bold;
					margin-bottom: 5px;
				}
				.left_bom {
					color: #9C9C9C;
				}
			}
			.pos_right {
				display: flex;
				padding-right: 30rpx;
				.icn {
					text-align: center;
					padding: 0rpx 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 20rpx;
					.picon {
						font-size: 20rpx;
						margin-top: 8rpx;
					}
				}
			}
		}
	}

	.bottom_box {
		flex: 1;
		display: grid;
		background-color: #eee;
		.shop_image {
			margin-top: 20rpx;
			background-color: #fff;
			.imgs {
				width: 94%;
				border-radius: 16rpx;
			}
		}
		.coupon_list {
			background-color: white;
			color: #9C9C9C;
			margin-top: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.li_top {
				display: flex;
				justify-content: space-between;
				margin-left: 20rpx;
				margin-top: 30rpx;
				margin-right: 60rpx;
				.li_h2 {
					font-weight: 500;
					font-size: 32rpx;
					color: #222222;
				}
				.li_p {
					font-size: 26rpx;
				}
			}
			.li_con {
				display: flex;
				justify-content: flex-start;
				margin-left: 20rpx;
				margin-top: 30rpx;
				.li_imgs {
					width: 112rpx;
					height: 112rpx;
					border-radius: 10px;
				}
				.con_right {
					padding-left: 20rpx;
					font-size: 24rpx;
				
					.con_p {
						padding: 2rpx 0rpx;
					}
				}
			}
				
			.li_bom {
				flex: 1;
				margin-top: 30rpx;
				margin-bottom: 20rpx;
				.li_btn {
					float: right;
					width: 168rpx;
					height: 64rpx;
					padding: 0rpx;
					margin: 0rpx;
					right: 70rpx;
					font-size: 24rpx;
					border-radius: 70rpx;
					line-height: 64rpx;
					color: white;
					background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
				}
			}
		}
	}
</style>